<template>
  <div class="pc" v-if="store.state.isPc">
    <div class="main">
      <!-- 通知 -->
      <div class="achievement" id="achievement">
        <div class="showtitle">
          <img src="../../assets/navbar3.png" alt="" />
        </div>
        <div class="showmore" @click="golist('#achievement')">
          <span>查看更多</span
          ><span
            ><el-icon><ArrowRight /></el-icon
          ></span>
        </div>
        <div class="achieve">
          <div class="left" v-if="newlist.achievement.length > 0">
            <el-carousel height="390px">
              <el-carousel-item
                v-for="item in newlist.achievement"
                :key="item"
                @click="godetails(item, '#achievement')"
              >
                <div class="box">
                  <img :src="item.cover" alt="" />
                  <div class="text">
                    <p>{{ item.name }}</p>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>

          <div class="right">
            <ul>
              <li
                v-for="item in newlist.achievement"
                :key="item.id"
                @click="godetails(item, '#achievement')"
              >
                <p>{{ item.name }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 成果 -->
      <div class="vision" id="vision">
        <div class="showtitle">
          <img src="../../assets/navbar2.png" alt="" />
        </div>
        <div class="radiobtnbox">
          
          <el-radio-group
            v-model="radio1.value"
            size="large"
            class="radiobtn"
            @change="cuttype"
          >
            <el-radio-button
              :label="item"
              v-for="item in radiolist.value"
              :key="item.id"
              >{{ item.class_name }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div class="showmore" @click="golist('#vision')">
          <span>查看更多</span
          ><span
            ><el-icon><ArrowRight /></el-icon
          ></span>
        </div>
        <el-carousel :interval="4000" height="470px" v-if="newlist.vision.length>0">
          <el-carousel-item  v-if="newlist.vision.length>=2&&newlist.vision[0]!=null&&newlist.vision[1]!=null" >
            <ul class="visionlist" >
              <li @click="godetails(newlist.vision[0], '#vision')">
                <img :src="newlist.vision[0]?.cover" alt="" />
                <div class="text">
                  <p>{{ newlist.vision[0]?.name }}</p>
                </div>
              </li>
              <li
                @click="godetails(newlist.vision?.[  1], '#vision')"
              >
                <img :src="newlist.vision[  1]?.cover" alt="" />
                <div class="text">
                  <p>{{ newlist.vision[  1]?.name }}</p>
                </div>
              </li>
            </ul>
          </el-carousel-item>
          

          <el-carousel-item   v-if="newlist.vision.length>=4&&newlist.vision[3]!=null&&newlist.vision[2]!=null">
            <ul class="visionlist" >
              <li @click="godetails(newlist.vision[2], '#vision')">
                <img :src="newlist.vision[2]?.cover" alt="" />
                <div class="text">
                  <p>{{ newlist.vision[2]?.name }}</p>
                </div>
              </li>
              <li
                @click="godetails(newlist.vision?.[  3], '#vision')"
              >
                <img :src="newlist.vision[  3]?.cover" alt="" />
                <div class="text">
                  <p>{{ newlist.vision[  3]?.name }}</p>
                </div>
              </li>
            </ul>
          </el-carousel-item>


            <el-carousel-item  v-if="newlist.vision.length>=6&&newlist.vision[5]!=null&&newlist.vision[4]!=null" >
            <ul class="visionlist" >
              <li @click="godetails(newlist.vision[4], '#vision')">
                <img :src="newlist.vision[4]?.cover" alt="" />
                <div class="text">
                  <p>{{ newlist.vision[4]?.name }}</p>
                </div>
              </li>
              <li
                @click="godetails(newlist.vision?.[  5], '#vision')"
              >
                <img :src="newlist.vision[  5]?.cover" alt="" />
                <div class="text">
                  <p>{{ newlist.vision[  5]?.name }}</p>
                </div>
              </li>
            </ul>
          </el-carousel-item>

          
        </el-carousel>
      </div>
      <!-- 对话 -->
      <div class="dialogue" id="dialogue">
        <div class="showtitle">
          <img src="../../assets/navbar1.png" alt="" />
        </div>
        <div class="showmore" @click="godialoguelist">
          <span>查看更多</span
          ><span
            ><el-icon><ArrowRight /></el-icon
          ></span>
        </div>
        <ul class="dialogueList">
          <li
            v-for="(item, index) in newlist.dialogue"
            :key="item.id"
            @click="godialoguedetails(item, '#dialogue')"
          >
            <img :src="item.cover" alt="" />
            <div class="text">
              {{ item.school_name }}
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 现场 -->
    <div class="scene" id="scene" v-if="newlist.scene.length > 0">
      <div class="showtitle">
        <img src="../../assets/navbar4.png" alt="" />
      </div>
      <div class="showmore" @click="golist('#scene')">
        <span>查看更多</span
        ><span
          ><el-icon><ArrowRight /></el-icon
        ></span>
      </div>
      <div class="carousel" v-if="newlist.scene.length > 0">
        <el-carousel type="card" height="670px">
          <el-carousel-item
            v-for="item in newlist.scene"
            :key="item"
            @click="godetails(item, '#scene')"
          >
            <div class="box">
              <img :src="item.cover" alt="" />
              <div class="text">{{ item.name }}</div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="foot">
      <div class="top">
        <p>指导单位：文化和旅游部科技教育司</p>
        <p>
          主办单位：全国文化艺术职业教育教学指导委员会、深圳市文化广电旅游体育局
        </p>
        <p>
          承办单位：全国文化艺术职业教育教学指导委员会对外交流与合作专委会、教学质量评价与保障专委会、深圳艺术学校、浙江艺术学校
        </p>
        <p>技术支持单位：广州市晨旭教育评估有限公司</p>
      </div>
      <div class="bottom">
        <p>ICP备05052393号-11</p>
      </div>
    </div>
  </div>
  <div class="mob" v-else>
    <!-- 通知 -->
    <div class="achievement" id="achievement">
      <div class="showtitle"><img src="../../assets/navbar3.png" alt="" /></div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in newlist.achievement"
          :key="item.id"
          @click="godetails(item, '#achievement')"
        >
          <img :src="item.cover" alt="" />
          <div class="text">
            <p>
              {{ item.name }}
            </p>
          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="showMoreSmall" @click="golist('#achievement')">
        <span>查看更多</span>
      </div>
    </div>
    <!-- 成果 -->
    <div class="vision" id="vision">
      <div class="showtitle"><img src="../../assets/navbar2.png" alt="" /></div>
       <div class="radiobtnbox">
         
          <el-radio-group
            v-model="radio1.value"
            size="large"
            class="radiobtn"
            @change="cuttype"
          >
            <el-radio-button
              :label="item"
              v-for="item in radiolist.value"
              :key="item.id"
              >{{ item.class_name }}</el-radio-button
            >
          </el-radio-group>
        </div>
      <div class="visionlist">
        <div
          class="visionitem"
          v-for="item in newlist.vision"
          :key="item.id"
          @click="godetails(item, '#vision')"
        >
          <div class="left">
            <img :src="item?.cover" alt="" />
          </div>
          <div class="right">
            <p>{{ item?.name }}</p>
          </div>
        </div>
      </div>

      <div class="showMoreSmall" @click="golist('#vision')">
        <span>查看更多</span>
      </div>
    </div>
    <!-- 对话 -->
    <div class="dialogue" id="dialogue">
      <div class="showtitle"><img src="../../assets/navbar1.png" alt="" /></div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in newlist.dialogue"
          :key="item.id"
          @click="godialoguedetails(item, '#dialogue')"
        >
          <img :src="item.cover" alt="" />
          <div class="text">
            {{ item.school_name }}
          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="showMoreSmall" @click="godialoguelist">
        <span>查看更多</span>
      </div>
    </div>

    <!-- 现场 -->
    <div class="scene" id="scene" v-if="newlist.scene.length > 0">
      <div class="showtitle"><img src="../../assets/navbar4.png" alt="" /></div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in newlist.scene"
          :key="item.id"
          @click="godetails(item, '#scene')"
        >
          <img :src="item.cover" alt="" />
          <div class="text">
            <p>{{ item.name }}</p>
          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="showMoreSmall" @click="golist('#scene')">
        <span>查看更多</span>
      </div>
    </div>

    <div class="foot">
      <p>指导单位：文化和旅游部科技教育司</p>
      <p>
        主办单位：全国文化艺术职业教育教学指导委员会、深圳市文化广电旅游体育局
      </p>
      <p>
        承办单位：全国文化艺术职业教育教学指导委员会对外交流与合作专委会、教学质量评价与保障专委会、深圳艺术学校、浙江艺术学校
      </p>
      <p>技术支持单位：广州市晨旭教育评估有限公司</p>
      <p>ICP备05052393号-11</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { CountTo } from "vue3-count-to";
import { ArrowRight } from "@element-plus/icons-vue";
import { allNewsClass, recommendNews, recommendSchool } from "../../api/api";
import { timestampToTime, Time } from "../../utils/utils";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
let $router = useRouter();
let store = useStore();
onMounted(() => {
  getclass();
});

//-------------------------------------------------------------------------------------新加分类
let radio1 = reactive({ value: {} });
let radiolist = reactive({ value: [] });
//-------------------------------------------------------------------------------------公告栏

let listlimit = [5, 6, 6, 3];
let classlist = reactive({ value: [] });
const getclass = () => {
  allNewsClass().then((res) => {
    classlist.value = res.data;
    classlist.value.forEach((item, index) => {
      if (item.item.length > 0) {
        radiolist.value = item.item;
        radio1.value = item.item[0];
        getnewlist(radio1.value, 6);
      } else {
        getnewlist(item, listlimit[index]);
      }
    });
  });
};

//获取列表
let newlist: any = reactive({
  dialogue: [],
  vision: [],
  achievement: [],
  scene: [],
});
const getnewlist = (item: any, limit: any) => {
  if (item.route == "#dialogue") {
    //单独模块
    recommendSchool({ limit: 6 }).then((res) => {
      newlist.dialogue = res.data;
    });
  } else {
    recommendNews({ class_id: item.id, limit }).then((res) => {
      if (item.route == "#vision") {
      let arr = []
       newlist.vision = []
        
       res.data = JSON.parse(JSON.stringify(res.data))
      res.data.forEach((item1,index1)=>{
       if(item1!=null||item1!='null'){
         arr.push(item1)
        console.log(arr)
       }
      })
       arr = JSON.parse(JSON.stringify(arr))
       newlist.vision = JSON.parse(JSON.stringify( newlist.vision))
      newlist.vision = arr
      }
       
      if (item.route == "#achievement") {
        newlist.achievement = res.data;
      }
      if (item.route == "#scene") {
        newlist.scene = res.data;
      }
    });
    console.log(newlist);
  }
};

const cuttype = (value: any) => {
  getnewlist(value, 6);
  console.log(value, 123);
};

const golist = (value: any) => {
  let data: any = {};
  classlist.value.forEach((item: any, index: number) => {
    if (item.route == value) {
      data = item;
    }
  });

  // window.open(
  //   `/download?name=${data.class_name}&class_id=${data.id}&route=${data.route}`
  // );
  $router.push({
    path: "/download",
    query: { route: data.route, class_id: data.id, name: data.class_name },
  });
};

const godetails = (item: any, route) => {
  console.log(item);
  let data: any = {};
  classlist.value.forEach((item: any, index: number) => {
    if (item.route == route) {
      data = item;
    }
  });

  window.open(
    `/downloaddetails?id=${item.id}&class_id=${data.id}&name=${data.class_name}&route=${data.route}`
  );
  // $router.push({path:'/downloaddetails',query:{
  //   class_id:data.id,
  //   name:data.class_name,
  //   route:data.route
  // }})
};

const godialoguelist = () => {
  let data: any = {};
  classlist.value.forEach((item: any, index: number) => {
    if (item.route == "#dialogue") {
      data = item;
    }
  });
  window.open(`/school?name=${data.class_name}`);

  // $router.push({ path: "/school", query: { name: data.class_name } });
};

const godialoguedetails = (item: any, route: any) => {
  let data: any = {};
  classlist.value.forEach((item: any, index: number) => {
    if (item.route == route) {
      data = item;
    }
  });
  console.log(item, data);
  window.open(
    `/schooldetails?schoolid=${item.id}&class_id=${data.id}&name=${data.class_name}&id=undefined&route=${data.route}`
  );
  // $router.push({path:'/schooldetails',query:{schoolid:item.id,class_id:data.id,name:data.class_name,id:undefined,route:data.route}})
};
</script>

<style lang="scss" scoped>
.pc {
  .dialogue {
    position: relative;
    width: 1400px;
    margin: 0 auto;
    margin-top: 40px;
    min-height: 1000px;
    margin-bottom: 20px;
    .showmore {
      margin-bottom: 20px;
      display: inline-block;
      float: right;
      cursor: pointer;
      span {
        &:nth-child(1) {
          font-size: 20px;
          font-family: Source Han Sans-Medium, Source Han Sans;
          font-weight: 500;
          color: #999999;
          line-height: 29px;
          margin-right: 10px;
        }
        &:nth-child(2) {
          display: inline-block;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          border: 1px solid #999999;
          text-align: center;
          line-height: 30px;
          .el-icon {
            font-size: 14px;
          }
        }
      }
    }
    .dialogueList {
      min-height: 830px;
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
      li {
        width: 450px;
        height: 390px;
        background: #f5f5f5;
        img {
          height: 280px;
          width: 100%;
        }
        .text {
          height: 110px;
          text-align: center;
          width: 400px;
          margin: 0 25px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 110px;
          font-size: 20px;
          font-family: Source Han Sans-Bold, Source Han Sans;
          font-weight: 700;
          color: #333333;
        }
      }
    }
  }

  .vision {
    position: relative;
    width: 1400px;
    margin: 0 auto;
    margin-top: 100px;
    .showmore {
      margin-top: 10px;
      display: inline-block;
      float: right;
      cursor: pointer;
      span {
        &:nth-child(1) {
          font-size: 20px;
          font-family: Source Han Sans-Medium, Source Han Sans;
          font-weight: 500;
          color: #999999;
          line-height: 29px;
          margin-right: 10px;
        }
        &:nth-child(2) {
          display: inline-block;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          border: 1px solid #999999;
          text-align: center;
          line-height: 30px;
          .el-icon {
            font-size: 14px;
          }
        }
      }
    }
    .radiobtnbox {
      height: 60px;
      position: relative;
    }
    .radiobtn {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%);
    }
    :deep(.el-carousel) {
      width: 100%;
      padding-top: 20px;

      .visionlist {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        li {
          width: 680px;
          height: 100%;
          position: relative;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
          .text {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            height: 73px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            font-size: 20px;
            font-family: Source Han Sans-Bold, Source Han Sans;
            font-weight: 700;
            color: #ffffff;

            text-align: center;
            p {
              width: 100%;
              line-height: 30px;
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-box-orient: vertical;
              text-align: center;
            }
          }
        }
      }
      .el-carousel__indicators {
        display: none;
      }
      .el-carousel__arrow--left {
        // left: -30px;
      }
      .el-carousel__arrow--right {
        // right: -30px;
      }
      .el-carousel--horizontal {
      }
    }
  }

  .achievement {
    width: 1400px;
    margin: 0 auto;
    margin-top: 100px;
    position: relative;
    .showmore {
      display: inline-block;
      float: right;
      cursor: pointer;
      span {
        &:nth-child(1) {
          font-size: 20px;
          font-family: Source Han Sans-Medium, Source Han Sans;
          font-weight: 500;
          color: #999999;
          line-height: 29px;
          margin-right: 10px;
        }
        &:nth-child(2) {
          display: inline-block;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          border: 1px solid #999999;
          text-align: center;
          line-height: 30px;
          .el-icon {
            font-size: 14px;
          }
        }
      }
    }
    .achieve {
      height: 410px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding-top: 20px;
      .left {
        cursor: pointer;
        width: 690px;
        height: 390px;
        background: #f5f7fb;
        img {
          width: 100%;
          height: 390px;
        }
        .text {
          width: 100%;
          height: 73px;
          background: rgba(0, 0, 0, 0.6);
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          font-size: 20px;
          font-family: Source Han Sans-Bold, Source Han Sans;
          font-weight: 700;

          color: #ffffff;
          text-align: center;

          position: absolute;
          bottom: 0;
          left: 0;

          p {
            position: absolute;
            left: 0;
            top: 50%;
            padding: 0 20px;
            transform: translateY(-50%);
            line-height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
          }
        }
        .box {
          position: relative;
        }
        :deep(.el-carousel__indicators) {
          display: none;
        }
      }

      .right {
        width: 690px;
        height: 390px;
        background: #f5f7fb;
        padding: 30px 30px;
        ul {
          li {
            border-bottom: 1px solid #dadada;
            height: 65px;
            line-height: 24px;
            font-size: 20px;
            font-family: Source Han Sans-Medium, Source Han Sans;
            font-weight: 600;
            color: #3d3d3d;
            position: relative;
            cursor: pointer;
            p {
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-box-orient: vertical;
            }
            &:hover p {
              color: #251b95;
            }
          }
        }
      }
    }
  }
  .scene {
    width: 1400px;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 50px;
    .carousel {
      width: 1400px;
      overflow: hidden;
    }
    .showmore {
      margin-top: 20px;
      display: inline-block;
      float: right;
      cursor: pointer;
      span {
        &:nth-child(1) {
          font-size: 20px;
          font-family: Source Han Sans-Medium, Source Han Sans;
          font-weight: 500;
          color: #999999;
          line-height: 29px;
          margin-right: 10px;
        }
        &:nth-child(2) {
          display: inline-block;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          border: 1px solid #999999;
          text-align: center;
          line-height: 30px;
          .el-icon {
            font-size: 14px;
          }
        }
      }
    }
    :deep(.el-carousel) {
      width: 1800px;
      transform: translateX(-200px);
      .el-carousel__item {
        height: 100%;
        .box {
          height: 100%;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          .text {
            height: 97px;
            background: linear-gradient(273deg, #a588cf 31%, #332fa5 100%);
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            text-align: center;
            line-height: 97px;
            font-size: 20px;
            font-family: Source Han Sans-Bold, Source Han Sans;
            font-weight: 700;
            color: #ffffff;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
          }
        }
      }
      .el-carousel__arrow--left {
        left: 250px;
      }
      .el-carousel__arrow--right {
        right: 250px;
      }
      .el-carousel__button {
        width: 22px;
        height: 22px;
        border-radius: 50%;

        background: #d8d8d8;
      }
      .is-active {
        .el-carousel__button {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: #4884e9;
        }
      }
    }
  }

  .showtitle {
    height: 130px;
    position: relative;
    img {
      position: absolute;
      top: 40px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .foot {
    width: 100%;
    height: 270px;
    background: url("../../assets/footbg.png") no-repeat;
    background-size: 100% 100%;
    .top {
      height: 220px;
      width: 1400px;
      margin: 0 auto;
      box-sizing: border-box;
      padding-top: 40px;
      p {
        font-size: 18px;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #ffffff;
        line-height: 36px;
      }
    }
    .bottom {
      height: 48px;
      border-top: 1px solid #dadada;
      p {
        line-height: 48px;
        text-align: center;
        font-size: 18px;
        font-family: Source Han Sans-Regular, Source Han Sans;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
.mob {
  .dialogue {
    padding: 1.5rem;
    .my-swipe {
      width: 46.875rem;
      height: 23.3125rem;
      .van-swipe-item {
        width: 46.875rem;
        height: 23.3125rem;

        position: relative;
        img {
          width: 46.875rem;
          height: 23.3125rem;
          width: calc(100% - 3rem);
        }
        .text {
          position: absolute;
          bottom: 0;
          left: 0;
          height: 7.3125rem;
          line-height: 7.3125rem;
          text-align: center;
          color: white;
          width: 100%;
          font-size: 20px;
        }
      }
    }
  }
  .vision {
    width: 100%;
    padding: 1.5rem;
    .visionlist {
      margin: 1.125rem 0;
      .visionitem {
        width: calc(100%);
        height: 7.875rem;
        display: flex;
        justify-content: space-between;
        padding: 1.125rem 0;
        border-bottom: 1px solid #ccc;
        .left {
          width: 9.625rem;
          min-height: 5.625rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          min-height: 5.625rem;
          width: calc(100% - 11rem);
          position: relative;
          p {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            font-weight: 600;
            font-size: 1.375rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
    .radiobtnbox {
      width: 100%;
      height: 3.75rem;
      position: relative;
      margin-bottom: 1.25rem;
      text-align: center;
    }
  }
  .achievement {
    padding: 1.5rem;
    .my-swipe {
      width: 46.875rem;
      height: 30rem;
      margin: 10px 0;
      .van-swipe-item {
        width: 46.875rem;
        height: 30rem;
        img {
          width: calc(100% - 3rem);
          height: 23.3125rem;
        }
        .text {
          height: calc(30rem - 23.9375rem);
          line-height: calc(2rem);
          text-align: center;
          color: 000000;
          width: calc(100% - 3rem);
          background: #f5f5f5;
          font-size: 1.5rem;
          position: relative;
          p {
            position: absolute;
            width: 90%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
          }
        }
      }
      :deep(.van-swipe__indicators) {
        bottom: 8rem !important;
      }
    }
  }
  .scene {
    padding: 1.5rem;
    .my-swipe {
      height: 30rem;
      margin: 10px 0;
      .van-swipe-item {
        height: 30rem;
        img {
          // width: calc(100% - 3rem);
          height: 23.3125rem;
          width: 100%;
        }
        .text {
          height: calc(30rem - 23.9375rem);
          line-height: 2rem;
          text-align: center;
          color: 000000;
          // width: calc(100% - 3rem);
          background: #f5f5f5;
          font-size: 1.5rem;
          position: relative;
          p {
            position: absolute;
            width: 90%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
          }
        }
      }
      :deep(.van-swipe__indicators) {
        bottom: 8rem !important;
      }
    }
  }
  .foot {
    background: #3c3daa;
    width: 46.875rem;
    height: 15.625rem;
    color: rgb(245, 245, 245);
    font-size: 1.125rem;
    padding: 0 1.5rem;
    padding-top: 2.1875rem;
    line-height: 1.875rem;
  }
  .showtitle {
    width: 20.0625rem;
    height: 3.8125rem;
    margin: 0 auto;
    margin-bottom: 15px;
    margin-top: 1.5rem;
    img {
      width: 20.0625rem;
      height: 3.8125rem;
    }
  }
  .showMoreSmall {
    background-color: #ededed;
    height: 5rem;
    border-radius: 0.3125rem;
    text-align: center;
    line-height: 5rem;
    color: rgb(133, 133, 133);
    cursor: pointer;
    text-align: center;
    font-size: 1.875rem;
    span {
      &:nth-child(2) {
        display: inline-block;
        border-radius: 50%;
        width: 1.4rem;
        margin-left: 0.625rem;
        height: 1.4rem;
        border: 1px solid #999999;
        text-align: center;
        line-height: 1.4rem;
        .el-icon {
          margin-left: 1px;
          margin-top: 2px;
          font-size: 0.875rem;
        }
      }
    }
  }
}
</style>
